<template>
  <van-popup
    v-bind="$attrs"
    title="修改发言人"
    position="bottom"
    teleport="#minutesPage"
    round
    :style="{ height: '80%' }"
    @closed="handlePopupClosed"
  >
    <div class="flex flex-col h-full">
      <div class="flex flex-row justify-between items-center px-2 h-[50px]">
        <div></div>
        <h2 class="font-bold text-[16px]">修改发言人</h2>
        <div></div>
      </div>
      <van-tabs style="width: 100%" v-model:active="active">
        <van-tab :title="`客户角色`"> </van-tab>
        <van-tab title="内部伙伴"> </van-tab>
      </van-tabs>
      <div class="flex flex-col flex-auto">
        <customerListView
          v-if="active === 0 && show"
          :labelParticipantInfo="labelParticipantInfo"
          @confirmCreateCustomer="createCustomerInfo"
          @selectCustomer="onSelectCustomer"
          ref="customerListViewRef"
        />
        <internalListView
          ref="internalListViewRef"
          v-if="active === 1 && show"
          @selectInternal="onSelectInternal"
          @confirmCreateInternal="onConfirmCreateInternal"
        />
      </div>
    </div>
  </van-popup>
</template>

<script>
import { defineComponent } from "vue";
import customerListView from "./customerListView.vue";
import internalListView from "./internalListView.vue";
import { LOSS_INFO_CODE } from "@/services/apiErrorCode";

import {
  changeCustomerRole,
  addCustomerRole,
  changeInternalEmployees,
  addInternalEmployees,
  createInternalAttendAPI,
  getCustomerContactApi,
  updateAsrName,
  markUserAsrName,
} from "@/services/minutes/lateAttender";
import { showFailToast, showLoadingToast, closeToast, showConfirmDialog } from "vant";
import { mapState, mapActions } from "pinia";
import { useMinutesStore } from "@/store";

export default defineComponent({
  name: "EditParticipantInfo",
  emits: ["createSuccess", "changeSuccess"],
  props: {
    changeItemSuccess: Function,
    labelParticipantInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    customerListView,
    internalListView,
  },
  data() {
    return {
      customerInfo: {},
      selectCustomerInfo: {},
      internalEmployeesInfo: {},
      active: 0,
      personType: "1", // 1 : 新建发言人 2: 已有发言人
      showCustomerPositionPicker: false,
      showCustomerRolePicker: false,
      showInternalPositionPicker: false,
      showSelectInternalPage: false,
      customerList: [],
      show: true,
    };
  },

  methods: {
    ...mapActions(useMinutesStore, {
      updateRemakeStatus: "updateRemakeStatus",
    }),

    // 新建【客户】发言人
    async createCustomerInfo(parameter) {
      parameter.ui = this.ui;

      showLoadingToast({ duration: 0 });
      const response = await addCustomerRole(this.confId, parameter);
      if (response.code !== 0) {
        showFailToast(response.message);
        return;
      }
      await this.updateNameAction(parameter.name);
      await this.changeItemSuccess();
      this.resetData();

      this.show = false;
      closeToast();
    },

    showEditCustomerAlert(message, item) {
      showConfirmDialog({
        title: "提示",
        message: message,
      }).then(() => {
        // 弹出编辑框
        this.$refs.customerListViewRef.onEditCustomer(item);
      });
    },

    // 选中【客户】已有发言人
    async onSelectCustomer(item) {
      console.log("选中【客户】已有发言人", item);
      // const { id, formData } = item;

      let id = item.id;
      let formData = item.formData || {};
      let parameter = {
        userId: this.ui,
        confId: this.confId,
        id,
        name: item.name,
        participantType: "CUSTOMER_ATTENDEE",
        formDataId: formData.formDataId || "",
      };

      console.log("parameter: ", parameter);
      this.markUserAsrNameAction(parameter);
    },

    async markUserAsrNameAction(parameter) {
      showLoadingToast({ duration: 0 });
      console.log("markUserAsrNameAction: ", parameter);
      await markUserAsrName(parameter);
      await this.changeItemSuccess();
      // TODO: 是否需要添加异常提示
      this.show = false;
      closeToast();
      this.updateRemakeStatus(true);
      this.resetData();
    },

    // 选中【内部发言人】
    async onSelectInternal(item) {
      console.log("选中【内部发言人】", item);
      const { isCustom, formData } = item;
      let parameter = {
        userId: this.ui,
        confId: this.confId,

        id: isCustom ? item.partnerId : item.ssoUserId,
        name: item.name,
        participantType: isCustom ? "EXTERNAL_PARTNER" : "PARTNER_ATTENDEE",
        formDataId: formData?.formDataId || "",
      };

      this.markUserAsrNameAction(parameter);
    },

    // 更新发言人名字
    async updateNameAction(name) {
      this.updateRemakeStatus(true);
      await updateAsrName(this.confId, {
        id: this.ui,
        value: name,
      });
    },

    resetData() {
      this.customerInfo = {};
      this.internalEmployeesInfo = {};
      this.active = 0;
    },

    async onConfirmCreateInternal(parameter) {
      parameter.ui = this.ui;
      console.log("confirmCreateInternal: ", parameter);
      showLoadingToast({ duration: 0 });
      await createInternalAttendAPI(parameter);
      this.$refs.internalListViewRef.reloadList();
      closeToast();
    },

    async getCustomerContact() {
      const res = await getCustomerContactApi(this.confId);
      if (res.code !== 0) return;
      this.customerList = res.data;
      console.log("getCustomerContact: ", res);
    },

    handlePopupClosed() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
      this.resetData();
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      isSalesMeet: "isSalesMeet",
      confId: "conferenceId",
      meetInfo: "getMeetInfo",
      userInfoList: "getUpdatedAsrUserList",
    }),

    cp_customerList() {
      return this.customerList;
    },

    ui() {
      return this.labelParticipantInfo.uid;
    },
  },
});
</script>

<style scoped lang="less">
.container {
  width: 100%;
}

.tab-content {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 32px;
}

.custom-field-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 32px;
  box-sizing: border-box;
  justify-content: space-between;
}

.field-label {
  color: #262626;
  font-size: 14px;
  margin-right: 4px;
}

.button {
  margin: 10px auto;
  width: 90%;
  height: 36px;
  bottom: 10px;
}

.text-field {
  text-align: right;
  width: 60%;
}

.required-tag {
  background-color: red;
  width: 4px;
  height: 4px;
  border-radius: 2px;
}

.check-box-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 32px;
  box-sizing: border-box;
}

.edit-view-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  // overflow-y: auto;
}

.cell {
  // background-color: blue;
}

:deep .van-radio__label {
  font-size: 14px;
}

:deep .van-field__control {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
